<template>
  <div id="main" ref="myChart"></div>
</template>

<script>
import {
  defineComponent,
  onBeforeUnmount,
  onMounted,
  onUnmounted,
  ref,
} from "@vue/runtime-core";
import * as echarts from "echarts";
import axios from "axios";
import store from "../../../store/index";
export default defineComponent({
  setup() {
    /**获取地图json数据 */
    const getMap = async () => {
      const res = await axios.get("static/map/china.json");
      if (res.status == 200) {
        console.log("res_getMap", res);
        echarts.registerMap("china", res.data);
      }
    };
    /**获取图表数据 */
    const list = ref([]); //接口数据
    let myData = ref([]); //图表数据
    function groupBy(objectArray, property) {
      return objectArray.reduce(function (acc, obj) {
        let key = obj[property];
        if (!acc[key]) {
          acc[key] = [];
        }
        acc[key].push(obj);
        return acc;
      }, {});
    }
    const getData = async () => {
      console.log("getData_____start");
      await store.dispatch("getCustomerInfo");
      list.value = store.state.customerInfo.list;
      //按属性对obj分类
      let grouped = groupBy(list.value, "province");
      // console.log("grouped ", grouped); //{山西: Array(1), 江西: Array(1), 北京: Array(2), 浙江: Array(1)}

      // 遍历对象 属性
      for (let key in grouped) {
        myData.value.push({
          name: key,
          value: grouped[key].length,
        });
      }
      // console.log("myData", myData.value);
    };

    let myChart = ref(null);
    const init = async () => {
      console.log("onMounted__init");
      myChart.value = echarts.init(document.getElementById("main"));
      await getMap();
      let option;
      option = {
        geo: {
          type: "map",
          map: "china",
        },
        visualMap: {
          min: 0,
          max: 20,
          text: ["High", "Low"],
          realtime: false,
          calculable: true,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"],
          },
        },
        tooltip: {
          trigger: "item",
          formatter: function (v) {
            if (!v.value) {
              v.value = 0;
            }
            return `${v.name}<br/>客户数: ${v.value}`;
          },
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "right",
          top: "center",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        series: [
          {
            data: myData.value,
            type: "map",
            map: "china",
          },
        ],
      };
      option && myChart.value.setOption(option);
    };
    onMounted(async () => {
      await getData();
      //先获取数据再挂载
      await init();
    });

    onBeforeUnmount(() => {
      console.log("onBeforeUnmount");
      if (myChart.value) {
        myChart.value.clear();
        myChart.value.dispose();

        myChart.value = null;
      }
    });
    return {
      myData,
      myChart,
    };
  },
});
</script>

<style lang='less' scoped>
#main {
  width: 100%;
  min-height: 400px;
  // border: 1px solid red;
}
</style>